<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title data-i18n="title">inCloud Beta</title>
	
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	<!-- HeadJS provided by cdnjs -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
	
	<script type="text/javascript">
	head.load(
		// Bootstrap CSS provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css",
		
		// Bootstrap Dashboard CSS (http://getbootstrap.com/examples/dashboard/)
		"/_s/bootstrap-3.3.4-dist/css/dashboard.min.css",
		
		// jQuery provided by Google
		"//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js",
		"/_s/i18next.js",
		"/_s/jquery-i18next.js",
		"/_s/locals/"+(navigator.userLanguage || navigator.language)+".js",
		"/_s/i18n.js",
		
		// Bootstrap Dialog CSS provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.4/css/bootstrap-dialog.min.css",
		
		// font-awesome provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css",
		
		// Bootstrap JS provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js",
		
		// Bootstrap Dialog JS provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.4/js/bootstrap-dialog.min.js",
		
		// jsbn libraries (http://www-cs-students.stanford.edu/~tjw/jsbn/)
		// Feel free to audit the scripts and/or host it yourself
		"/_s/jsbn/jsbn.js",
		"/_s/jsbn/jsbn2.js",
		"/_s/jsbn/rsa.js",
		"/_s/jsbn/rsa2.js",
		"/_s/jsbn/base64.js",
		
		// jsrsasign libraries (https://github.com/kjur/jsrsasign)
		// Feel free to audit the scripts and/or host it yourself
		"/_s/jsrsasign-4.7.0/asn1hex-1.1.js",
		"/_s/jsrsasign-4.7.0/rsapem-1.1.js",
		"/_s/jsrsasign-4.7.0/rsasign-1.2.js",
		"/_s/jsrsasign-4.7.0/crypto-1.1.js",
		
		// CryptoJS libraries (https://code.google.com/p/crypto-js/) provided by cdnjs
		"//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/core-min.js",
		"//cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/components/sha256-min.js",
		
		
		// In house Javascript
		// feel free to audit and/or host it yourself
		"/_s/intense.js", // Application functions
		"/_s/md5.js", // Because all other MD5 implementations suck
		"/_s/decodeBase64.js", // Because all other base64 implementations suck (well sort of)
		"/_s/sign.js" // The RSA-SHA256 signing functions for headers
	);
	
	head.ready(function() {
		intensify();
	});
	</script>
</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
					<span class="icon-bar"></span> <span class="icon-bar"></span> 
				</button> 
				<a class="navbar-brand" href="#" data-i18n="nav.home">inCloud</a> 
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a class="keyId">aa:bb:cc</a></li>
					<li><a class="loginName">(placeholder)</a></li>
					<li><a href="#" class="logout" onclick="removeLocal(true);" data-i18n='nav.logout'>Logout</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
	<span class='test'></span>
				<ul class="nav nav-sidebar">
					<li id='default'><a href="#" onclick="displayMachines(event)" data-i18n="sidebar.machines">List Machines</a></li>
					<li><a href="#" onclick="displayImages(event)" data-i18n='sidebar.images'>List Images</a></li>
					<li><a href="#" onclick="displayPackages(event)" data-i18n='sidebar.packages'>List Packages</a></li>
					<li><a href="#" onclick="displayNetworks(event)" data-i18n='sidebar.networks'>List Networks</a></li>
					<li><a href="#" onclick="displayKeys(event)" data-i18n='sidebar.keys'>List Keys</a></li>
				</ul>
				<ul class="nav nav-sidebar newOptions">
					<li><a href="#" onclick="displayCreateMachine(event)" data-i18n='sidebar.provision'>Provision New Machine</a></li>
					<li><a href="#" onclick="displayAddKey(event)" data-i18n='sidebar.addKey'>Add SSH Key</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li class="loading"><a><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span></a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"></div>
		</div>
	</div>
	<div class="modal fade information" tabindex="-1" role="dialog" aria-labelledby="informationModal" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel" data-i18n='credentials.title'>Please provide your CloudAPI credentials</h4> </div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<p><label for="loginHandle" data-i18n='credentials.userName'>Login handle</label></p>
							<p><input type="text" class="form-control" id="loginHandle"></p>
						</div>
						<div class="form-group noFileInput">
							<p><button type="button" class="btn btn-info btn-xs" onclick="noFileInput()" data-i18n='credentials.keystxt'>I have the keys to enter instead of files</button></p>
						</div>
						<div class="form-group">
							<p><label for="RSA_private_key" data-i18n='credentials.privateKey'>RSA Private Key (PEM format)</label></p>
							<p><input type="file" id="privateKeyFile" /></p>
							<p><textarea class="form-control" rows="3" id="RSAPrivateKey"></textarea></p>
						</div>
						<div class="form-group">
							<p><label for="RSA_keyId"><span data-i18n='credentials.fignerPrint'>Public Key Fignerprint</span><small class="hexMD5">*hexMD5(base64_decode(PublicKey))*</small> <small class="noFileReader">(ssh-keygen -lf /path/to/rsa_pub_key)</small></label></p>
							<p><input type="file" id="publicKeyFile" /></p>
							<p><textarea class="form-control" rows="3" id="readPublic" readonly></textarea></p>
							<p><input type="text" class="form-control" id="RSAKeyId" placeholder="aa:bb:cc:dd:ee:ff:gg:hh:ii:jj:kk:ll:mm:nn:oo:pp"></p>
						</div>
						<button type="button" class="btn btn-primary" onclick="register()" data-i18n='credentials.login'>Login</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<style>
	.glyphicon-refresh-animate {
		-animation: spin .7s infinite linear;
		-webkit-animation: spin2 .7s infinite linear;
	}
	
	@-webkit-keyframes spin2 {
		from {
			-webkit-transform: rotate(0deg);
		}
		to {
			-webkit-transform: rotate(360deg);
		}
	}
	
	@keyframes spin {
		from {
			transform: scale(1) rotate(0deg);
		}
		to {
			transform: scale(1) rotate(360deg);
		}
	}
	</style>
</body>

</html>